.contacts__container
  padding-top: 37px
  padding-bottom: 38px
  justify-content: space-between
  align-items: center
  border-top: 1px solid
  border-bottom: 1px solid
  border-color: #cacaca

.contacts__address
  max-width: 256px
  margin-right: 80px
  font-weight: 400
  font-style: normal
  font-size: 16px
  line-height: 32px
  color: $colorDarkGray
  &-color
    font-weight: 600
    font-size: 24px

.contacts__form
  margin-right: auto
  max-width: 909px
  width: 100%
  align-items: center

.contacts__input-wrap
  position: relative
  margin-right: 20px
  flex-direction: column-reverse

.js-validate-error-label
  position: absolute
  top: -16px
  left: 17px
  font-weight: 400
  font-size: 12px
  line-height: 16.34px
  color: #D11616 !important

.contacts__input
  padding: 9px 24px
  width: 270px
  height: 50px
  border: 1px solid $colorDarkGray
  border-radius: 90px

.contacts__input:focus,
.contacts__input:hover,
.contacts__input:active
  outline: none

.contacts__input:focus,
.contacts__input:hover
  background-color: rgb(234, 234, 234)

.contacts__btn
  max-width: 329px
  width: 100%
  height: 50px
  box-sizing: inherit
  font-weight: 700
  font-size: 18px
  line-height: 25px
  border: 2px solid $colorPurpleDefault
  border-radius: 90px
  color: $colorPurpleDefault
  &::before
    content: ""
    position: absolute
    top: -6px
    bottom: -6px
    left: -6px
    right: -6px
    background-color: inherit
    border: 2px solid $menuHover
    border-radius: 90px
    z-index: -1
    opacity: 0
    transition: background-color .2s ease-in-out, color .2s ease-in-out
  &:focus-visible
    outline: none
  &:focus-visible:not(:hover)::before
    opacity: 1
  &:hover
    color: $white
    background-color: $colorPurpleDefault
  &:active
    box-shadow: inset 0 0 0 3px $colorLightPurple
    border: none
    color: $white
    background-color: $colorDarkPurple

.contacts__connection-text
  display: block
  margin-bottom: 6px
  font-weight: 600
  font-size: 24px
  line-height: 32px
  color: $colorDarkGray

.contacts__item
  width: 40px
  height: 40px
  &:not(:last-child)
    margin-right: 20.6px

.contacts__whatsapp,
.contacts__telegram
  display: block
  width: 100%
  height: 100%

.contacts__whatsapp:hover:not(:active) svg path:first-child,
.contacts__whatsapp:focus-visible:not(:active) svg path:first-child,
.contacts__telegram:focus-visible:not(:active) svg path:first-child,
.contacts__telegram:hover:not(:active) svg path:first-child
  opacity: 0.6

.contacts__whatsapp:active svg path:first-child,
.contacts__telegram:active svg path:first-child
  stroke: $socialIcons
  stroke-width: 1

.contacts__map
  width: 100%
  height: 700px

.ymaps-2-1-79-ground-pane
  filter: grayscale(1)

.ymaps-2-1-79-zoom
  height: unset !important
  &__scale
    display: none

.ymaps-2-1-79-copyright__wrap,
.ymaps-2-1-79-map-copyrights-promo
  display: none !important

.ymaps-2-1-79-float-button
  box-shadow: 0 1px 2px 0px rgb(0 0 0 / 15%), 0 2px 5px -3px rgb(0 0 0 / 15%) !important

.contacts__placemark
  background-image: url("@/image/map/placemark.svg")

@media (max-width: 1880px)
  .contacts__container
    flex-direction: column
    align-items: flex-start

  .contacts__address
    margin: 0
    margin-bottom: 30px

  .contacts__form
    margin: 0
    margin-bottom: 30px

@media (max-width: 1420px)
  .contacts__container
    padding-top: 43px
    padding-bottom: 42px

  .contacts__form
    max-width: 923px

  .contacts__btn
    max-width: 343px

  .ymaps-2-1-79-controls__control
    display: none !important

@media (max-width: 1008px)
  .contacts__form
    flex-wrap: wrap

  .contacts__input
    width: 324px
    &-wrap
      margin-bottom: 13px
    &-wrap-mr
      margin-right: 0

  .contacts__btn
    padding: 10px 24px
    max-width: 317px

@media (max-width: 687px)
  .contacts__container
    padding-top: 0
    padding-bottom: 20px
    border-top: none
    border-bottom: none

  .contacts__address
    margin-bottom: 14px
    font-size: 14px
    line-height: 19.07px
    &-color
      line-height: 24.51px
      font-size: 18px

  .contacts__input
    width: 290px
    height: 40px
    &-wrap
      margin-bottom: 20px

  .contacts__btn-addition
    display: none

  .contacts__btn
    padding: 7px 24px
    max-width: 128px
    height: 41px
    font-size: 12px

  .contacts__form
    margin-bottom: 21px
    flex-direction: column
    align-items: flex-start

  .contacts__connection-text
    font-size: 17px

  .contacts__item
    width: 50px
    height: 50px
    & svg
      width: 100%
      height: 100%
    &:not(:last-child)
      margin-right: 20px

  .contacts__map,
  .ymaps-2-1-79-map
    height: 320px
